<script setup lang="ts">
import { ref } from 'vue'
import { getMemberAddressByIdAPI, postMemberAddressAPI,putMemberAddressByIdAPI } from '@/pages/service/address'
import { onLoad } from '@dcloudio/uni-app'

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})
////////////////////////////////////////////////////////////////////////////////////////////////////////定义校验规则
const rules:UniHelper.UniFormsRules = { //定义校验规则 :rules="rules"
  receiver:{ //要校验的字段  name="receiver"
    rules:[
      {
        require: true, //必填项
        errorMessage: '请输入收获人姓名', //错误消息提示
      }
    ]
  },
  contact:{ //要校验的字段  name="receiver"
    rules:[
      {
        require: true, //必填项
        errorMessage: '请输入联系方式', //错误消息提示
      },
      {pattern:/^1[3-9]\d{9}$/,errorMessage:'输入的手机号码格式不正确'}
    ]
  },
  fullLocation:{ //要校验的字段  name="receiver"
    rules:[
      {
        require: true, //必填项
        errorMessage: '请选择地址', //错误消息提示
      }
    ]
  },
  fullLocation:{ //要校验的字段  name="fullLocation"
    rules:[
      {
        require: true, //必填项
        errorMessage: '请选择地址', //错误消息提示
      }
    ]
  },
  address:{ //要校验的字段  name="address"
    rules:[
      {
        require: true, //必填项
        errorMessage: '请输入详细地址', //错误消息提示
      }
    ]
  },
}
//存储表单实列
const formRef = ref<UniHelper.UniFormsInstance>()
//////////////////////////////////////////////////////////////////////////////动态设置标题
//获取页面传递过来的参数
const query = defineProps<{
  id?:string
}>()
///////////////////////动态设置标题
uni.setNavigationBarTitle({ title:query.id ? '修改地址' : '新建地址' })


/////////////////////////////////////////////////////////////////////////////////////////////////地址收集事件
const onRegionPicker = (ev) => {
  //省市区(前端展示)
  form.value.fullLocation = ev.detail.value.join(' ') //.join 表示数组转换为字符串
  // 省份编码(后端参数),数组解构有顺序要求
  const [provinceCode,cityCode,countyCode] = ev.detail.code!
  //合并,类似 {...row}
  Object.assign(form.value,{provinceCode,cityCode,countyCode})
}
///////////设置设为默认地址事件
const onSwitchChange:UniHelper.SwitchOnChange = (ev) => {
  //这里后端接收的是数值,使用三目运算符,
  form.value.isDefault = ev.detail.value? 1 : 0
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////提交表单
///提交表单事件
const onsubmit = async () => {
  try {
    //进行表单校验
    await formRef.value?.validate?.()
    //有id的话就是修改,没有id就是添加
    if (query.id) {
      await putMemberAddressByIdAPI(query.id, form.value);
    } else {
      await postMemberAddressAPI(form.value)
    }
    //设置延时,要不然提示消息不显示
    setTimeout(() => {
      //成功提示
      uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
      //返回上一页
      uni.navigateBack()
    }, 400)
  } catch (error) {
     uni.showToast({ icon: 'error', title: '请把信息补充完整' })
  }
}
//////////////////////////////////////////////////////////////////////////////////////////////////////获取地址详情数据
//调用后端获取地址详情接口
const getMemberAddressByIdData =async () => {
  if (query.id){
    const res = await getMemberAddressByIdAPI(query.id)
    //把数据合并到表单中
    Object.assign(form.value,res.result)
  }
}


//////////////////////页面加载一次调用
onLoad(() => {
  getMemberAddressByIdData();
});




</script>

<template>
   <view class="content">
    <!--表单校验必须使用uni-forms \ :model="form" 表示要校验的表单数据-->
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="receiver">
        <text class="label">收货人</text>
          <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </uni-forms-item>
      <uni-forms-item name="fullLocation" class="form-item">
        <text class="label">所在地区</text>
        <!--.split(' ') 字符串分割成数组,:value="form.fullLocation.split(' ')" 控制的是窗口-->
        <picker class="picker" mode="region" :value="form.fullLocation.split(' ')" @change="onRegionPicker">
          <!--v-if 表示如果form.fullLocation不为null 侧展示值-->
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#27ba9b" @change="onSwitchChange" :checked="form.isDefault === 1"/>
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button @tap="onsubmit" class="button">保存并使用</button>
  {{form}}
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
